<template>
  <div class="c-content">
    <div class="c-card-left">
      <div class="c-card-title car_title">新产品快报</div>
      <div class="c-eve">
        <div class="eve-name text_01">本地数据库备份上云</div>
        <div class="eve-height">
          <span class="eve-time text_01">2021年9月10日</span>
          <span class="eve-btn">新功能</span>
        </div>
      </div>
      <div class="c-eve">
        <div class="eve-name text_01">MyBase MySQL增加本地SSD型: i2g、i2的多个主机规格,支持部署MySQL高可用实例</div>
        <div class="eve-height">
          <span class="eve-time text_01">2021年9月2日</span>
          <span class="eve-btn">新版本/新规格</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
    }
  }
}
</script>

<style lang="less" scoped>
.c-content {
  width: 100%;
  height: 100%;
  padding: 16px;
  .c-card-left {
    width: 100%;
    height: 100%;
    float: left;
    padding-right: 50px;
    .c-card-title {
      width: 100%;
      height: 40px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: 500;
    }
    .c-eve {
      padding-left: 4px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 600;
      color: #405580;
      margin-bottom: 20px;
      .eve-name {
        // height: 30px;
        line-height: 30px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
      .eve-height {
        .eve-time {
          font-weight: 400;
          margin-right: 5px;
        }
        .eve-btn {
          height: 25px;
          line-height: 25px;
          display: inline-block;
          background: #0091ff;
          text-align: center;
          font-weight: 400;
          color: #ffffff;
          padding: 0 10px;
          border-radius: 15px;
        }
      }
    }
  }
}
</style>
